<template>
	<div class="content" ref="container">
		<div class="list" v-for="(item,index) in goods" :key="index">
			<p class="img"></p>
			<div class="msg">
				<p class="name">{{item.name}}</p>
				<div class="price_box">
					<p class="price">¥{{item.price}}</p>
					<div class="add">
						<p @click="decrease(index)">-</p>
						<p>{{item.chooose}}</p>
						<p @click="increase(index,$event)" class="jia">+</p>
					</div>
				</div>
			</div>
		</div>
		<div class="total_box">
			<p class="chooose">选中：3件</p>
			<p class="price">总价：¥30</p>
		</div>
		<!-- <div class="add_to_car" :style="{transform: styles}">
			<p class="iconfont">+</p>
		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				goods:[
					{
						name:'拿铁',
						price:10,
						chooose:0
					},
					{
						name:'拿铁1',
						price:20,
						chooose:0
					},
					{
						name:'拿铁2',
						price:30,
						chooose:0
					}
				],
				totalPrice:0,// 总价
				jumpTarget:{},// 地步原始坐标
				styles: ''
			}
		},
		methods: {

			// 增加商品
			increase(index,event){
				let { x , y } = event.detail
				this.goods[index].chooose++
				this.getJumpTarget(index,x,y)
			},

			// 跳转获取坐标
			getJumpTarget(index,x,y){
				let target = {
					x,y
				}
				this.goods[index].target = target
				console.log(this.goods[index].target)
				// this.styles = `translate(${x}px, ${y}px)`
				// this.styles = `translate(${this.jumpTarget.x}px, ${this.jumpTarget.y}px)`
				
				let div = document.createElement('div')
				div.className = 'add_to_car'
				div.style.position = 'fixed'
				div.style.top = '0'
				div.style.left = '0'
				div.style.color = '#fff'
				div.style.fontSize = '20px'
				div.style.zIndex = '9'
				div.style.transition = '0.5s linear'
				let p = document.createElement('p')
				p.textContent = '+'
				p.style.width = '25px'
				p.style.height = '25px'
				p.style.lineHeight = '25px'
				p.style.background = '#4a90e1'
				p.style.borderRadius = '50%'
				p.style.textAlign = 'center'
				p.style.textAlign = 'center'
				p.style.transition = '0.5s cubic-bezier(0.3,-0.3,1,1)'

				// 设置初始位置
				div.style.transform = `translateX(${x}px)`
				p.style.transform = `translateY(${y}px)`
				div.appendChild(p)
				const container = this.$refs.container;
      			container.appendChild(div);

				div.clientWidth

				div.style.transform = `translateX(${this.jumpTarget.x}px)`
				p.style.transform = `translateY(${this.jumpTarget.y}px)`
			}
			
		},
		onLoad(options) {
			
		},
		onReady(){
			const query = uni.createSelectorQuery().in(this);
			query.select('.chooose').boundingClientRect(rect => {
				if (rect) {
					console.log('元素位置信息：', rect);
					this.jumpTarget = {
						x:rect.left,
						y:rect.top+50
					}
				}
			}).exec();
		}
	}
</script>

<style lang="scss">
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		padding:30rpx;
		.list{
			display: flex;
			margin-bottom:30rpx;
			.img{
				width: 150rpx;
				height: 150rpx;
				background: #aaa;
			}
			.msg{
				flex: 1;
				margin-left:20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.price_box{
					display: flex;
					justify-content: space-between;
					.add{
						display: flex;
						p{
							margin:0 10rpx;
							font-size:40rpx;
						}
					}
				}
			}
		}
		.total_box{
			height: 150rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background: #aaa;
			position: fixed;
			bottom:30rpx;
			width: 92%;
			z-index: 10;
			.chooose{
				width: 180rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: rgb(43, 151, 239);
				border-radius: 10rpx;
				text-align: center;
			}
		}
		.add_to_car{
			// position: fixed;
			// top:0;
			// left: 0;
			// color:#fff;
			// font-size:40rpx;
			// z-index: 9;
			// transition: 1s;
			.iconfont{
				// width: 50rpx;
				// height: 50rpx;
				// line-height: 50rpx;
				// background: #4a90e1;
				// border-radius: 50%;
				// text-align: center;
			}
		}
	}
	
</style>
